import React from 'react'
import { useShallow } from 'zustand/react/shallow'
import useConfigStore from './store/test'
import useMineStore from './store/mine'

function App() {
  const { theme, setTheme, setName } = useConfigStore(
    useShallow((state: any) => ({
      theme: state.theme,
      setTheme: state.setTheme,
      setName: state.setName
    }))
  )

  const { setText, text } = useMineStore(
    useShallow((state) => ({
      setText: state.setText,
      text: state.text
    }))
  )
  return (
    <div className="App">
      <div>{theme}</div>
      <button onClick={() => setTheme(theme === 'light' ? 'dark' : 'light')}>
        切换
      </button>
      <div onClick={() => setName('bbb', 'theme')}>切换</div>
      <div>{text}</div>
      <div onClick={() => setText('aaa')}>切换</div>
    </div>
  )
}

export default App
